<template>
    <section>
        <div class="left">
            <div class="tabs">
                <div
                    class="tabs-tab base64-selector"
                    title="Select an element in the page to inspect it"
                    :class="{ active: selectorActive }"
                    @click="chooseSelector">
                </div>
                <div
                    class="tabs-tab"
                    :title="!debuggingCanvasId ? 'Pause canvas' : 'Resume canvas'"
                    :class="{ 'debugger-canvas': !debuggingCanvasId, 'debugger-canvas-active': debuggingCanvasId }"
                    @click="toggleDebuggingCanvasId">
                </div>
                <div 
                    class="tabs-tab"
                    v-for="(key, item) in canvas"
                    :key="index"
                    :class="{ active: key === activeCanvas }"
                    @click="chooseCanvas(key)">
                    {{item.name}}
                </div>
            </div>
            <div class="content">
                <template v-for="element in rootElement">
                    <v-element
                        v-if="$index < maxVisibleElementsCount"
                        :key="$key"
                        :canvas-id="activeCanvas"
                        :instance-id="$key"
                        :depth="0">
                    </v-element>
                </template>
                <div
                    class="content-showMore"
                    v-if="visibleShowMore"
                    @click="maxVisibleElementsCount += 20">Show more</div>
            </div>
        </div>
        <div class="right">
            <v-detail></v-detail>
        </div>
    </section>
</template>

<script>
import constants from 'constants';
import vElement from './element.vue';
import vDetail from './detail.vue';
import Bus from '../bus.js';

export default {
    data () {
        window.A = this;
        return {
            activeCanvas: null,
            debuggingCanvasId: false,

            maxVisibleElementsCount: 30,
        };
    },
    computed: {
        visibleShowMore () {
            return this.elements && (this.maxVisibleElementsCount < Object.keys(this.rootElement).length);
        },
        rootElement () {
            if (!this.elements) return [];

            let roots = {};
            for (var i in this.elements) {
                if (!this.elements[i].parent) {
                    roots[i] = this.elements[i];
                }
            }

            return roots;
        },
        selectorActive () {
            return this.$state.selectorActive;
        },
        isPaintRecording: {
            get () {
                return this.$state.isPaintRecording;
            },
            set (newValue) {
                this.$actions.setIsPaintRecording(newValue);
            },
        },
        canvas () {
            return this.$state.elements;
        },
        elements () {
            return this.$state.elements[this.activeCanvas] ? this.$state.elements[this.activeCanvas].sprites : [];
        },
    },
    watch: {
        activeCanvas (val) {
            this.debuggingCanvasId = false;
        },
        '$state.elements' (val) {
            if (!this.$state.elements[this.activeCanvas] && val && Object.keys(val).length) {
                this.activeCanvas = Object.keys(this.$state.elements)[0];
            }
        },
    },
    components: {
        vElement,
        vDetail,
    },
    methods: {
        chooseSelector () {
            this.$actions.setSelectorActive(!this.$state.selectorActive);
        },
        chooseCanvas (canvasId) {
            this.activeCanvas = canvasId;
        },
        toggleDebuggingCanvasId () {
            this.debuggingCanvasId = !this.debuggingCanvasId;
            this.$actions.pause(this.activeCanvas || Object.keys(this.$state.elements)[0], this.debuggingCanvasId);
        },
    }
};
</script>

<style lang="scss" scoped>
@import '../variables.scss';

.left, .right {
    box-sizing: border-box;
    width: 50%;
    padding: 8px 0; 
    flex-grow: 0;
}
.left {
    border-right: 1px solid $border-color;
    height: 100%;
}
.content {
    padding: 10px 6px 40px;
    height: calc(100% - 70px);
    overflow: scroll;

    .content-showMore {
        padding: 2px;
        width: 80px;
        text-align: center;
        margin: 10px 30px;
        background: #eee;
        border: 1px solid #aaa;
        border-radius: 3px;
        color: #999;
        box-shadow: 1px 1px #a7a3a3;

        &:hover {
            box-shadow: 1px 1px 6px 0px #a7a3a3;
        }
    }
}

.tabs {
    padding-top: 2px;
    width: 100%;
    overflow-x: scroll;
    border-bottom: 1px solid $border-color;

    .tabs-tab {
        display: inline-block;
        padding: 6px;
        width: 70px;
        height: 12px;
        line-height: 12px;
        background: #f3f3f3;
        margin-left: 6px;
        border: 1px solid $border-color;
        border-bottom: 0;
        text-align: center;
        overflow-x: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
        cursor: pointer;

        &.active {
            color: $active-color;

            &:hover {
                box-shadow: 0 0;
            }
        }

        &:hover {
            box-shadow: 1px 1px 6px 0px #a7a3a3;
        }

        &.base64-selector {
            width: 13px;
            background-size: 100% 100%;
            background-position: 1px 1px;
            background-image: url();

            &.active {
                background-image: url();
                background-size: 80% 80%;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
        &.debugger-canvas {
            height: 12px; 
            width: 13px; 
            display: inline-block; 
            position:relative;
            &:before, &:after {
                content: '';
                height: 12px; 
                width: 4px; 
                display: block; 
                background: #666;
                position: absolute; 
                top: 7px; 
                left: 7px;
            }
            &:after {
                left: 15px;
            }
        }
        &.debugger-canvas-active {
            height:12px; 
            width:13px; 
            display: inline-block; 
            position:relative;
            &:before {
                content:''; 
                height: 0; 
                width: 0; 
                display: block; 
                border: 6px transparent solid; 
                border-right-width: 0; 
                border-left-color: $active-color; 
                position: absolute; 
                top: 7px; 
                left: 14px;
            }

            &:after {
                content:''; 
                height: 12px; 
                width: 4px; 
                display: block; 
                background: $active-color; 
                position: absolute; 
                top: 7px; 
                left: 7px;
            }
        } 
    }
}
</style>
